<template>
  <!-- 需求单 -->
  <div>
    <!-- 第一行 -->
    <el-row :gutter="10">
      <el-col span="2.5">
        <el-button icon="el-icon-menu"> 黄金品类 </el-button>
      </el-col>
      <el-col span="2.5">
        <a href="http://localhost:9001/file/purchaseOrder/export">
          <el-button icon="el-icon-printer">导出</el-button></a
        >
      </el-col>
      <el-col :span="6">
        <el-date-picker
          v-model="timeStage"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-col>
      <el-col span="1">
        <div>&nbsp;</div>
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="queryPageBean.queryString"
          placeholder="请输入搜索内容"
        />
      </el-col>
      <el-col span="2">
        <el-button type="primary" icon="el-icon-search" @click="getAll()"
          >搜索</el-button
        >
      </el-col>
      <el-col span="3">
        <el-button type="primary" plain @click="resetSearch()"
          >重置搜索</el-button
        >
      </el-col>
    </el-row>

    <!-- 表格 -->

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" align="center" width="50">
        <template slot-scope="scope">
          <span>
            {{ scope.$index + 1 }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="orderNo" align="center" label="单号" width="180" />
      <el-table-column
        prop="customer"
        align="center"
        label="客户"
        width="100"
      />
      <el-table-column
        prop="purWeight"
        align="center"
        label="重量"
        width="80"
      />
      <el-table-column prop="purNums" align="center" label="数量" width="80" />
      <el-table-column
        prop="cargoWeight"
        align="center"
        label="来货重量"
        width="80"
      />
      <el-table-column
        prop="cargoNums"
        align="center"
        label="来货数量"
        width="80"
      />
      <el-table-column
        prop="makPeople"
        align="center"
        label="制单人"
        width="100"
      />
      <el-table-column
        prop="createdTime"
        align="center"
        label="制单时间"
        width="170"
      />
      <el-table-column
        label="状态"
        align="center"
        width="150"
        prop="purchaseOrderStatus"
      >
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button  type="success" size="small" :disabled="scope.row.purchaseOrderStatus == '已取消'"  @click="finished(scope.row)"> 
            编辑
          </el-button>
          <el-button   type="primary" size="small" :disabled="scope.row.purchaseOrderStatus == '已取消'" @click="detail(scope.row)"
            >详情</el-button
          >
          <div style="margin: 5px"></div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="1"
      :page-sizes="[10, 20, 30]"
      :page-size="10"
      :total="total"
      style="float: right"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import purchaseOrder from "@/api/needManager/purchaseOrder";
export default {
  data() {
    return {
      //采购单单列表
      tableData: [],
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: null,
      //date组件绑定模型
      timeStage: "",
      //封装搜索条件
      queryPageBean: {
        currentPage: 1,
        pageSize: 10,
        queryString: "",
        startDate: "",
        endDate: "",
      },
    };
  },
  created() {
    // 获取所有采购单信息
    this.getAll();
  },
  methods: {
    //查询所有采购单信息
    getAll() {
      //搜索条件
      if (this.timeStage != null) {
        this.queryPageBean.startDate = this.timeStage[0];
        this.queryPageBean.endDate = this.timeStage[1];
      } else {
        this.queryPageBean.startDate = "";
        this.queryPageBean.endDate = "";
      }
      //执行查询
      purchaseOrder.findPage(this.queryPageBean).then((result) => {
        this.tableData = result.data.rows;
        console.log(this.tableData);
        //将状态改变为对应的状态
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].purchaseOrderStatus == 1) {
            this.tableData[i].purchaseOrderStatus = "编辑";
          } else if (this.tableData[i].purchaseOrderStatus == 2) {
            this.tableData[i].purchaseOrderStatus = "采购中";
          } else if (this.tableData[i].purchaseOrderStatus == 3) {
            this.tableData[i].purchaseOrderStatus = "已完成";
          } else if (this.tableData[i].purchaseOrderStatus == 0) {
            this.tableData[i].purchaseOrderStatus = "已取消";
          }
        }
      });
    },
    //重置按钮
    reset() {
      this.queryPageBean.input = "";
      this.queryPageBean.startDate = "";
      this.queryPageBean.endDate = "";
      this.getAll();
    },
    //重置搜索
    resetSearch() {
      this.timeStage = [];
      this.queryPageBean.queryString = "";
      this.getAll();
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.queryPageBean.pageSize = val;
      this.getAll();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.queryPageBean.currentPage = val;
      this.getAll();
    },
    //编辑采购单
    finished(row) {
      //判断当前的状态是否为已完成,完成则不能编辑
      if (row.purchaseOrderStatus == "已完成") {
        this.$message({
          message: "该采购单已完成,无法编辑",
          type: "warning",
        });
        return;
      } else {
        //跳转到编辑采购单页面
        this.$router.push({
          path: "/purchaseOrderGoodsEdit",
          query: {
            purchaseOrderId: row.purchaseOrderId,
          },
        });
      }
    },
    //获取采购单详情
    detail(row) {
      // 跳转到需求单详情页面
      this.$router.push({
        path: "/purchaseOrderDetails",
        query: {
          purchaseOrderId: row.purchaseOrderId,
        },
      });
    },
  },
};
</script>

<style scoped>
</style>
